<template>
    <div class="flex_box">
        <div style="width:50%">
            <el-scrollbar height="600px">
                <el-checkbox-group v-model="activityExtent" @change="activityExtentChange">
                    <el-checkbox label="我发布的活动" />
                    <el-checkbox label="我参与的活动" />
                </el-checkbox-group>
                <div v-loading="showLoading" class="own_activity_list" style="min-height:80px;width:100%">
                    <div v-for="activity in activityList" :key="activity.activityId" class="own_activity_item">
                        <div>
                            <activity-item-component :activityItem="activity" />
                            <br>
                            <span style="float:right">
                                <el-dropdown>
                                    <span class="el-dropdown-link">
                                        操作
                                        <el-icon class="el-icon--right">
                                            <arrow-down />
                                        </el-icon>
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <!-- <el-dropdown-item>查看数据</el-dropdown-item> -->
                                            <el-dropdown-item
                                                v-if="activity.activitySponsorId == this.$store.state.user.userId"
                                                @click="downMenu_edit(activity)">修改活动</el-dropdown-item>
                                            <!-- <el-dropdown-item
                                                v-if="activity.activitySponsorId != this.$store.state.user.userId">
                                                退出活动</el-dropdown-item>
                                            <el-dropdown-item
                                                v-if="activity.activitySponsorId == this.$store.state.user.userId">撤销活动</el-dropdown-item> -->
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </span>
                            <br>
                            <el-divider border-style="dotted" />
                        </div>
                    </div>
                    <el-empty description="你还没有参加或发布任何一个活动" v-if="activityList != null && activityList.length == 0" />
                </div>
            </el-scrollbar>
        </div>
        <div style="width:50%;border-left: 1px solid #D4D7DE;">
            <h2 style="text-align:center">{{ editing?'当前正在编辑活动': '创建活动' }}</h2>
            <br>
            <el-form label-width="120px" v-model="activity_form">
                <el-form-item label="活动标题">
                    <el-input v-model="activity_form.activityTitle" />
                </el-form-item>
                <el-form-item label="活动描述">
                    <el-input v-model="activity_form.activityDesc" type="textarea" />
                </el-form-item>
                <el-form-item label="活动要求">
                    <el-input v-model="activity_form.activityRequirement" type="textarea" />
                </el-form-item>
                <el-form-item label="活动地点">
                    <el-input v-model="activity_form.activityPosition" />
                </el-form-item>
                <el-form-item label="签到码">
                    <el-input v-model="activity_form.activityVerification" />
                </el-form-item>
                <el-form-item label="报名时间">
                    <el-date-picker v-model="activity_form.activityArrange" type="datetime" placeholder="点击选择报名时间" />
                </el-form-item>
                <el-form-item label="活动开始时间">
                    <el-date-picker v-model="activity_form.activityStage" type="datetime" placeholder="点击选择活动开始时间" />
                </el-form-item>
                <el-form-item label="活动截止时间">
                    <el-date-picker v-model="activity_form.activityDone" type="datetime" placeholder="点击选择活动截止时间" />
                </el-form-item>
                <el-form-item label="参与范围">
                    <el-radio-group v-model="activity_form.activityExtent">
                        <el-radio label="全国">全国</el-radio>
                        <el-radio label="全校">全校</el-radio>
                        <el-radio label="班级">班级</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-if="editing" @click="alterActivity">提交更改</el-button>
                    <el-button type="primary" v-if="!editing" @click="postActivity">发布活动</el-button>
                    <el-button type="info" @click="reform">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import ActivityItemComponent from '../ActivityItemComponent.vue'
export default {
    components: { ActivityItemComponent },
    data() {
        return {
            editing: false,
            showLoading: true,
            activityList: null,
            ownActivityList: null,
            engageActivityList: null,
            activity_form: null,
            activityExtent: ['我发布的活动', '我参与的活动']
        }
    },
    created() {
        // this.getActivityList()
        this.reform()
    },
    methods: {
        reform() {
            this.activity_form = {
                activityId: 0, activityTitle: '', activityDesc: '', activityRequirement: '',
                activityPosition: '', activityVerification: '', activityExtent: '全国', activityArrange: '',
                activityStage: '', activityDone: ''
            }
            this.editing = false
        },
        downMenu_edit(activity) {
            this.activity_form = activity
            this.editing = true
        },
        getActivityList() {
            this.$store.state.ajaxQueue.length++
            this.$request.get('/activity/activity_own').then(data => {
                this.$store.state.ajaxQueue.finished++
                this.ownActivityList = data.data.data
                this.activityList = this.ownActivityList
                this.$store.state.ajaxQueue.length++
                this.$request.get('/activity/activity_engage').then(data2 => {
                    this.$store.state.ajaxQueue.finished++
                    this.engageActivityList = data2.data.data
                    if (this.activityList != null) this.activityList = this.activityList.concat(this.engageActivityList)
                    else this.activityList = this.engageActivityList
                    this.noRepet()
                })
            })
        },
        alterActivity() {
            this.$store.state.ajaxQueue.length++
            this.$request.post('/activity/activity_alter', this.activity_form).then(data => {
                this.$store.state.ajaxQueue.finished++
                this.$ElMessage({
                    message: data.data != null ? '修改成功' : '修改失败',
                    type: data.data != null ? 'success' : 'error',
                })
                if (data.data != null) {
                    this.getActivityList()
                    this.reform()
                }
            })
        },
        activityExtentChange() {
            if (this.activityExtent.length == 2) {
                this.activityList = this.ownActivityList
                this.activityList = this.activityList.concat(this.engageActivityList)
            } else if (this.activityExtent[0] == '我发布的活动') this.activityList = this.ownActivityList
            else if (this.activityExtent[0] == '我参与的活动') this.activityList = this.engageActivityList
            this.noRepet()
        },
        postActivity() {
            this.$store.state.ajaxQueue.length++
            this.$request.post('/activity/activity_propose', this.activity_form).then(data => {
                this.$store.state.ajaxQueue.finished++
                this.$ElMessage({
                    message: data.data != null ? '发布成功' : '发布失败',
                    type: data.data != null ? 'success' : 'error',
                })
                if (data.data != null) {
                    this.getActivityList()
                    this.reform()
                }
            })
        },
        noRepet() {
            this.activityList = this.activityList.filter((item, index) => {
                let isRepet = false
                for (let i = index + 1; i < this.activityList.length; i++) {
                    if (this.activityList[i].activityId == item.activityId) {
                        isRepet = true
                        break
                    }
                }
                return !isRepet
            })
            this.activityList.sort((activity1, activity2) => {
                return activity2.activityDate - activity1.activityDate
            })
        }
    },
    watch: {
        '$store.state.user'() {
            this.getActivityList()
        },
        activityList() {
            this.showLoading = this.activityList == null
        },
    }
}
</script>

<style scoped>
.flex_box {
    display: flex;
}

.own_activity_list {
    display: flex;
    flex-wrap: wrap;
}

.own_activity_item {
    padding: 10px;
    width: 100%;
}

main {
    max-width: 1240px;
    margin: auto;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}

main>h1 {
    margin: 20px;
}

article img {
    max-width: 100%;
}

.article_bottom {
    height: fit-content;
    position: fixed;
    padding: 20px;
    bottom: 0px;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    background-color: white;
    border-top: 1px solid #cdd0d6;
}
</style>